<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" >
<h:body>
	<ui:composition template="/templates/master.xhtml">
		<ui:define name="content">
			<h:form id="newMemberForm">
			<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />  
			<p:panel id="panel" header="New Member Registration">  
				
					<h:panelGrid columns="3">  
						<h:outputText for="Membership" value="Membership Package: *" />  
				        <p:selectOneMenu value="#{memberMB.member.membership}" effect="fade"  required="true" label="Membership" id="Membership" converter="omnifaces.SelectItemsConverter">  
				            <f:selectItem itemLabel="Select One" itemValue="" />  
				            <f:selectItems value="#{membershipMB.activeMemberships}" var="membership" itemLabel="#{membership.name}" itemValue="#{membership}"/>
				            <f:ajax render="MembershipInfo"/>  
				        </p:selectOneMenu> 	
				        <p:message id="MembershipMsg" for="Membership" display="default" />
					</h:panelGrid>
			        <h:panelGrid id="MembershipInfo" columns="2">
			        	<h:outputText style="font-weight:bold" value="Price (RM): " />
			        	<h:outputText value="#{memberMB.member.membership.price}" />
			        	
			        	<h:outputText style="font-weight:bold" value="Description: " />
			        	<h:outputText value="#{memberMB.member.membership.description}" />				        	
			        </h:panelGrid>	
			        
					<h:panelGrid columns="3">  			        
					    <h:outputLabel for="expiryDate" value="Membership Expiry: *" />  
					    <p:calendar id="expiryDate" value="#{memberMB.member.membershipExpiryDate}" navigator="true" display="inline" label="expiryDate" required="true">
					    </p:calendar>  
					    <p:message id="expiryDateMsg" for="expiryDate" display="default" />  			        				
					</h:panelGrid>
					
					<p:separator/>
					
					<h:panelGrid columns="3"> 
					 
					    <h:outputLabel for="name" value="Name: *" />  
					    <p:inputText id="name" value="#{memberMB.member.name}" required="true" label="Name" maxlength="100" >
					    	<f:validateLength minimum="5"/>
					    </p:inputText>
					    <p:message id="nameMsg" for="name" display="default" />  
					
					    <h:outputLabel for="nric" value="NRIC/Passport No.: *" />  
					    <p:inputText id="nric" value="#{memberMB.member.nric}" required="true" label="NRIC" maxlength="12" > 
					    	<f:validateLength minimum="5"/> 
					    	<f:validator validatorId="memberNRICValidator"/>
					    </p:inputText>
					    <p:message id="nricMsg" for="nric" display="default" />  
					    
					    <h:outputLabel for="dob" value="Date Of Birth: *" />  
					    <p:calendar id="dob" value="#{memberMB.member.dob}" navigator="true" display="inline" label="DOB" required="true">
					    	<f:validator validatorId="memberDOBValidator"/>
					    </p:calendar>  
					    <p:message id="dobMsg" for="dob" display="default" />  
					    
					    <h:outputLabel for="gender" value="Gender: " />  
				        <p:selectOneMenu value="#{memberMB.member.gender}" effect="fade"  label="gender" id="gender">  
				            <f:selectItem itemLabel="Male" itemValue="male" />  
				            <f:selectItem itemLabel="Female" itemValue="female" />  
				        </p:selectOneMenu> 						    
					    <p:message id="genderMsg" for="gender" display="default" />  			
					    
					    <h:outputLabel for="add1" value="Address: *" />  
					    <p:inputText id="add1" value="#{memberMB.member.address1}" required="true" label="Address" maxlength="30" /> 
					    <p:message id="add1Msg" for="add1" display="default" />  					    		    
					
					    <h:outputLabel for="add2" value="&nbsp;" />  
					    <p:inputText id="add2" value="#{memberMB.member.address2}" required="false" label="Address2" maxlength="30" /> 
					    <p:message id="add2Msg" for="add2" display="default" />  						
					
					    <h:outputLabel for="add3" value="&nbsp;" />  
					    <p:inputText id="add3" value="#{memberMB.member.address3}" required="false" label="Address3" maxlength="30" /> 
					    <p:message id="add3Msg" for="add3" display="default" />  
					    
					    <h:outputLabel for="email" value="Email: " />  
					    <p:inputText id="email" value="#{memberMB.member.email}" label="Email" maxlength="100" validatorMessage="Email">
					    	<f:validateRegex pattern="^[\_]*([a-zA-Z0-9]+(\.|\_*)?)+@([a-zA-Z][a-zA-Z0-9\-]+(\.|\-*\.))+[a-zA-Z]{2,6}$" />
					    </p:inputText> 
					    <p:message id="emailMsg" for="email" display="default" /> 					
					
						<h:outputLabel for="mobile" value="Mobile No.: *" />  
					    <p:inputText id="mobile" value="#{memberMB.member.mobileNo}" required="true" label="Mobile No." maxlength="100" validatorMessage="Numeric only">
					    	<f:validateRegex pattern="[0-9]+$" />
					    </p:inputText> 
					    <p:message id="mobileMsg" for="mobile" display="default" /> 
					
						<h:outputLabel for="occupation" value="Occupation: " />  
					    <p:inputText id="occupation" value="#{memberMB.member.occupation}" required="false" maxlength="100" />
					    <p:message id="occupationMsg" for="occupation" display="default" /> 					
					
					</h:panelGrid> 
					
					<p:separator/>
					<h:panelGrid columns="3">  
					
						<h:outputLabel for="emerName" value="Emergency Contact Name: " />  
					    <p:inputText id="emerName" value="#{memberMB.member.emergencyName}" required="true" maxlength="100" label="Emergency Contact Name"/>
					    <p:message id="emerNameMsg" for="emerName" display="default" /> 
					    
					    <h:outputLabel for="emerContact" value="Emergency Contact No.: " />  
					    <p:inputText id="emerContact" value="#{memberMB.member.emergencyContactNo}" required="true" maxlength="100" label="Emergency Contact No." validatorMessage="Numeric only">
					    	<f:validateRegex pattern="[0-9]+$" />
					    </p:inputText>
					    <p:message id="emerContactNameMsg" for="emerContact" display="default" />
					    
					    <h:outputLabel for="emerRelationship" value="Emergency Contact Relationship: " />  
					    <p:inputText id="emerRelationship" value="#{memberMB.member.relationship}" required="true" maxlength="100" label="Emergency Contact Relationship"/>
					    <p:message id="emerRelationshipMsg" for="emerRelationship" display="default" />					    
					
					</h:panelGrid>
					<p:separator/>
					<h:panelGrid columns="3">  
					
						<p:dataTable id="multiMedic" var="med" value="#{medicalMB.medicals}" rowKey="#{med.name}" selection="#{memberMB.member.medicals}" >  
								<f:facet name="header"> Medical Attention </f:facet>  						  
						        <p:column selectionMode="multiple" style="width:2%" />  
						        <p:column headerText="Medical">#{med.name}</p:column>  
						        <p:column headerText="Description">#{med.description}</p:column>  
					    </p:dataTable> 
					
					</h:panelGrid>
					
					
					<p:commandButton id="btnSave" value="Save" update="panel" actionListener="#{memberMB.createMember}"/>  
					<p:commandButton id="btnReset" value="Clear" update="panel" process="@this">
						<p:resetInput target="panel" />  
					</p:commandButton>  
				
			</p:panel>
			</h:form>
		</ui:define>
	</ui:composition>
</h:body>
</html>